<template>
	<!-- 商品分类 -->
	<view class="wp">
		<view class="list_item" v-for="(item,idx) in info" :key="setKey(item.title,idx)">
			<view class="" style="display: flex;align-items: center;padding-bottom: 10upx;">
				<text>分类（{{idx-0+1}}）：</text>
				分类排序 <text style="margin-left: 20upx;"></text> <uni-easyinput type="number" :clearable="false"
					v-model="info[idx].displayorder" placeholder="分类排序" />
			</view>
			<uni-easyinput :clearable="false" v-model="info[idx].title" placeholder="分类名称" />
			<view class="buttons">
				<button size="mini" @click="deleteTap(info[idx].id,idx)">删除</button>
				<button size="mini" @click="editTap(info[idx],idx)">提交修改</button>
			</view>
		</view>
		<button class="but_sub1" v-if="!isSumbit" @click="addLaber">添加分类</button>
		<button class="but_sub2" v-else @click="submitTap">提交新添分类</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uid: '',
				info: [],
				isSumbit: false,
			}
		},
		onLoad(options) {
			this.uid = options.uid;
			this.getInfo();
		},
		methods: {
			getInfo() {
				this.$axios('supgoods/cateList', 'POST', 'supplier', {
					uid: this.uid
				}).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
					}
				})
			},
			editTap(v, idx) {
				if (v.title === '') {
					this.$api.msg('请填写分类名称！');
					return;
				}
				v.uid = this.uid;
				this.$axios('supgoods/cateSave', 'POST', 'supplier', v).then(res => {
					if (res.data.code == 200) {
						this.info[idx].id = res.data.data;
						this.$api.msg('修改成功！');
					}
				})
			},
			submitTap() {
				if (this.info[this.info.length - 1].title === '') {
					this.$api.msg('请填写分类名称！');
					return;
				}
				if (this.info[this.info.length - 1].id !== '') {
					this.$api.msg('未新添分类！');
					return;
				}
				this.info[this.info.length - 1].uid=this.uid;
				this.$axios('supgoods/cateSave', 'POST', 'supplier', this.info[this.info.length - 1]).then(res => {
					if (res.data.code == 200) {
						this.info[this.info.length - 1].id = res.data.data;
						this.isSumbit = false;
						this.$api.msg('添加成功！');
					}
				})
			},
			deleteTap(id, v) {
				if (id === '') {
					this.info.splice(v, 1);
					this.isSumbit = false;
					return;
				}
				this.$axios('supgoods/cateDel', 'POST', 'supplier', {
					id,
					uid: this.uid
				}).then(res => {
					if (res.data.code == 200) {
						this.$api.msg('删除成功！');
						this.info.splice(v, 1);
					}
				})

			},
			addLaber() {
				this.info.push({
					id: '',
					title: '',
					displayorder: '9999'
				});
				this.isSumbit = true;
			},
			setKey(v, id) {
				return v + id;
			}
		}
	}
</script>

<style lang="scss">
	.wp {
		padding: 20upx;
	}

	.list_item {
		padding-bottom: 20upx;

		text {
			font-size: 32upx;
		}

		button {
			margin-left: 20upx;
		}
	}

	.buttons {
		padding-top: 20upx;
	}

	.but_sub1,
	.but_sub2 {
		color: #fff;
		font-size: 32upx;
		line-height: 90upx;
		margin-top: 20upx;
		box-shadow: 4rpx 5rpx 17rpx 7rpx #ddd;
	}

	.but_sub1 {
		background: $bg-color;
	}

	.but_sub2 {
		background: $btn-one;
	}
</style>